<template>
  <div class="pop-up" v-if="popShow">
    <div class="box">
      <div class="text" v-html="popText">{{popText}}</div>
      <div class="buttons">
        <img class="cancel" src="../common/images/pop_cancel.png" alt="" @click="cancel">
        <img class="offirm" src="../common/images/pop_offirm.png" alt="" @click="offirm">
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    components: {
    },
    props: {
      'popReLink': {
        default: ''
      },
      'popShow': {
        default: false
      },
      'popText': {
        default: ''
      }
    },
    data () {
      return {
      }
    },
    methods: {
      // 取消
      cancel() {
        this.$emit('cancel')
      },
      // 确认
      offirm() {
        if (this.popReLink) {
          this.$router.push({path: this.popReLink})
        } else {
          this.cancel()
        }
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import '../common/stylus/base.styl'
  .pop-up
    width 100vw
    height 100vh
    position fixed
    top 0
    bottom 0
    right 0
    left 0
    background rgba(0, 0, 0, 0.7)
    overflow hidden
    z-index 1000
    .box
      width vw(542)
      height vw(243)
      background url("../common/images/pop_bg.png") no-repeat center
      background-size 100% 100%
      overflow hidden
      position absolute
      top 50%
      left 50%
      margin-left vw(-271)
      margin-top vw(-121)
      .text
        width 100%
        height vw(80)
        margin vw(50) auto 0
        font-size vw(25)
        overflow hidden
        color #505050
        line-height 160%
        display flex
        justify-content center
        align-items center
        text-align center
      .buttons
        width 74%
        margin 0 auto
        position absolute
        top vw(155)
        left 50%
        margin-left -37%
        display flex
        justify-content space-between
        img
          display block
          width vw(158)
          height vw(42)
</style>
